<template>
  <a-modal
    title="选择采集器配置"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel">

    <a-card :bordered="false">

      <s-table
        ref="table"
        size="middle"
        tableLayout="fixed"
        :columns="columns"
        :data="loadData"
        :alert="true"
        :rowKey="(record) => record.code"
        :row-selection="{ selectedRowKeys: selectedRowKeys,selectedRows:selectedRows,type: 'radio',onChange: onSelectChange }"
        :customRow="rowClick"
      >
      </s-table>

    </a-card>
  </a-modal>
</template>

<script>
  import { STable } from '@/components'
  import { sysDictTypeDropDown } from '@/api/modular/system/dictManage'
  import { addConfig } from '@/api/modular/main/bizcollectorconfig/bizCollectorConfigManage'
  import { page } from '@/api/modular/main/bizstation/bizStationManage'

  export default {
    components: {
      STable
    },
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        visible: false,
        confirmLoading: false,
        form: this.$form.createForm(this),
        selectedRowKeys: [],
        selectedRows: [],
        defaultExpandedKeys: [],
        replaceFields: {
          key: 'id'
        },
        columns: [ // 表头
          {
            title: '编码',
            dataIndex: 'code'
          },
          {
            title: '采集器类型',
            dataIndex: 'value'
          }
        ],
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          return sysDictTypeDropDown(Object.assign(parameter, { code: 'collector_type' })).then((res) => {
            const obj = {}
            obj.pageNo = 1
            obj.pageSize = 10
            obj.totalPage = res.data.length / 10
            obj.totalRows = res.data.length
            obj.rows = res.data
            this.collectorConfigList = res.data
            return obj
          })
        },
        collectorConfigList: [],
        gatewayId: 0
      }
    },
    methods: {
      add (record) {
        this.visible = true
        this.gatewayId = record
      },
      // loadData () {
      //   sysDictTypeDropDown({ code: 'collector_type' }).then((res) => {
      //     this.collectorConfigList = res.data
      //   })
      // },
      onSelectChange (selectedRowKeys, selectedRows) {
        this.selectedRowKeys = selectedRowKeys
        this.selectedRows = selectedRows
      },
      rowClick (record) {
        return {
          on: {
            click: () => {
              this.selectedRowKeys = [record.code]
              this.selectedRows = [record]
              this.$refs.table.updateSelect(this.selectedRowKeys, this.selectedRows)
            }
          }
        }
      },
      handleSubmit () {
        this.confirmLoading = true
        addConfig({ codes: this.selectedRows, gatewayId: this.gatewayId }).then(res => {
          this.confirmLoading = false
          if (res.success) {
            this.$message.success('新增成功')
            this.handleCancel()
            this.$emit('ok', { codes: this.selectedRows, gatewayId: this.gatewayId })
          } else {
            this.$message.info('新增失败：' + res.message)
          }
        }).finally((res) => {
          this.confirmLoading = false
        })
      },
      handleCancel () {
        this.form.resetFields()
        this.selectedRowKeys = []
        this.selectedRows = []
        this.visible = false
      }
    },
    mounted () {
      // this.loadData()
    }
  }
</script>
